<template>
    reactive() 将使对象本身具有响应性
    <br><button @click="state.count++">{{ state.count }}</button>
    <br>reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的
    <br>
    <div>raw === proxy :{{ raw === proxy }}</div>
    <br>为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身：
    <div>
        reactive(raw) === proxy: {{ reactive(raw) === proxy }}
        <br>
        reactive(proxy) === proxy: {{ reactive(proxy) === proxy }}
        <br>这个规则对嵌套对象也适用。依靠深层响应性，响应式对象内的嵌套对象依然是代理

    </div>


    reactive() 的局限性
    <div>
        1.有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
        2.不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
        <div>
            let state = reactive({ count: 0 }) <br>

            // 上面的 ({ count: 0 }) 引用将不再被追踪 <br>
            // (响应性连接已丢失！)<br>
            state = reactive({ count: 1 })
        </div>
        3.对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：
        <div>
            const state = reactive({ count: 0 })
            <br>
            // 当解构时，count 已经与 state.count 断开连接
            <br>
            let { count } = state
            <br>
            // 不会影响原始的 state
            <br>
            count++
            <br>
            // 该函数接收到的是一个普通的数字
            <br>
            // 并且无法追踪 state.count 的变化
            <br>
            // 我们必须传入整个对象以保持响应性
            <br>
            callSomeFunction(state.count)
        </div>
    </div>


</template>

<script setup lang='ts'>


import { reactive } from 'vue';
const state = reactive({ count: 0 })


const raw = {}
const proxy = reactive(raw)




</script>

<style></style>